<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
        事件伪托和冒泡
    </template>


    <section class="section" @click="bubble">
      <div class="div" data-id="index">
          <el-button type="primary" @click="handle"></el-button>
      </div>
    </section>
  </el-card>
</template>

<script setup lang="ts" name="event">
const bubble = (e) => {
  console.log('事件冒泡',e.target.parentNode.getAttribute('data-id'))
}

const handle = () => {

}
</script>

<style scoped lang="less">
.section{
  width: 500px;
  height: 500px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  .div{
    width: 200px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
